import React from 'react';
import {
  Badge,
  Link,
  Space,
  Tooltip,
  Typography,
} from '@arco-design/web-react';
import { IconDelete } from '@arco-design/web-react/icon';
import ActionWrapper from '@/components/ActionWrapper';

// const { Text } = Typography;

export function getColumns(
  t: unknown,
  callbcack: (record: Record<string, unknown>, type: string) => Promise<void>,
  tableColumns: Array<unknown>,
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  options: Array<any>,
  lang: string
) {
  const defaultColumns = options.filter((a) => tableColumns.includes(a.value));
  const customColumns = [
    {
      title: t['searchTable.columns.action'],
      dataIndex: 'action',
      width: 200,
      render: (_: any, a): JSX.Element => (
        <ActionWrapper action="devicemanager.device/delete">
          <Tooltip
            position="bottom"
            content={t['searchTable.operation.remove']}
          >
            <IconDelete
              style={{
                fontSize: 20,
                cursor: 'pointer',
              }}
              onClick={() => callbcack(a, 'remove')}
            />
          </Tooltip>
        </ActionWrapper>
        // <Link onClick={() => callbcack(a, 'remove')}>
        //   {t['searchTable.operation.remove']}
        // </Link>
      ),
    },
    {
      title: t['searchTable.columns.remark'],
      dataIndex: 'remark',
      render: (a): JSX.Element => <>{a || '--'}</>,
    },
  ];
  const columns = defaultColumns.map((a) => {
    const k = customColumns.findIndex((b) => b.dataIndex === a.value);
    return k === -1
      ? {
          ...{
            title: a.label,
            dataIndex: a.value,
          },
          ...(a.width ? { width: a.width } : {}),
        }
      : customColumns[k];
  });
  return [...columns];
}
